<template>
	<view class="app">
		<view class="re">
			<view class="bacimg center">
				<image class="img-a" :src="img"></image>
			</view>
			<view class="codeimg center">
				<image class="img-b" :src="QR_Code"></image>
			</view>

			<view class="bttc center">
				<view  class="bcbutton center" v-if="deliveryFlag" @click="handleShowPoster">
					<!-- <view class="bcbutton center" @click="openComment"> -->
					<text>保存海报</text>
				</view>

				<view :style="{'margin-top':mar }" class="bcbuttontt center" v-if="!deliveryFlag"  @click="texte">
					<!-- <view class="bcbutton center" @click="openComment"> -->
					<text>确认保存</text>
				</view>
			</view>
			<hch-poster ref="hchPoster" @cancel="handleCancel" :posterData.sync="posterData"
				@previewImage='previewImage' />

			<view class="below_w column">

				<view class="bk  space-between">

					<view class="nump">
						<view class="people">
							<image src="/static/pay/icon_56.png"></image>
							<view class="pstyle">邀请人数</view>
							<view class="pstylen">{{quantity}}</view>
						</view>
					</view>

					<view class="awardp">
						<view class="award">
							<image src="/static/pay/icon_57.png"></image>
							<view class="jlrs">可使用奖励次数</view>
							<view class="jlrsn">{{reward}}</view>
						</view>

					</view>
				</view>
				<view class="center">
					<view class="infos">奖励说明:邀请好友提交表格后,24小时内可以免费咨询医生</view>
				</view>
			</view>
			<!-- <canvas style="width: 750rpx;height: 1500rpx;" canvas-id="myCanvas"></canvas> -->
		</view>
		<!-- <save-page :inviteData="inviteData" ref="comment"></save-page> -->
	</view>
</template>

<script>
	import api from '@/api/commonc.js'
	import HchPoster from '@/components/hch-poster/hch-poster.vue'

	export default {
		components: {
			HchPoster,
		},
		data() {
			return {
				mar:'-30rpx',
				deliveryFlag: true, 
				reward: '',
				QR_Code: '',
				img: '',
				quantity: '',
				inviteData: {},
				posterData: {
					poster: {
						//根据屏幕大小自动生成海报背景大小
						url: '', //图片地址
						r: 10, //圆角半径
						w: 330, //海报宽度
						h: 480, //海报高度
						p: 300 ,//海报内边距padding
						mt: 0,
						
					},
					mainImg: {
						//海报主商品图
						// url: 'https://huangchunhongzz.gitee.io/imgs/poster/product.png', //图片地址
						url: '', //图片地址
						r: 0, //圆角半径
						w:150, //宽度
						h: 150 ,//高度
						
					},
					title: {
						//商品标题
						text: '', //文本
						fontSize: 0, //字体大小
						color: '#000', //颜色
						lineHeight: 0, //行高
						mt: 20 //margin-top
					},
					codeImg: {
						//小程序码
						url: '', //图片地址
						w: 0, //宽度
						h: 0, //高度
						mt: 0, //margin-top
						r: 0 //圆角半径
					},
					tips: [
						//提示信息
						{
							text: '', //文本
							fontSize: 0, //字体大小
							color: '#2f1709', //字体颜色
							align: 'center', //对齐方式
							lineHeight: 0, //行高
							mt: 20 //margin-top
						},
						{
							text: '长按/扫描识别查看商品', //文本
							fontSize: 0, //字体大小
							color: '#2f1709', //字体颜色
							align: 'center', //对齐方式
							lineHeight: 0, //行高
							mt: 20 //margin-top
						}
					]
				},
			}
		},
		onLoad() {
			this.pmgd()
			this.getDetails()
		},
		methods: {
			pmgd(){
				 const res = uni.getSystemInfoSync();
				   if(res.screenHeight>800){
					   this.mar='200rpx'
				   }
			},
			handleShowPoster() {
				this.$refs.hchPoster.posterShow()
				this.deliveryFlag=false
			},
			texte() {
				this.$refs.hchPoster.handleSaveCanvasImage()
			},
			async getDetails() {
				const openid = await uni.getStorageSync('openid');
				const {
					data
				} = await api.inviteFriends({openid:openid})
				this.reward = data.reward
				this.QR_Code = data.QR_Code
				this.img = data.img
				this.quantity = data.quantity

				this.posterData.poster.url = this.img
				this.posterData.mainImg.url = this.QR_Code
				this.inviteData = {
					img: this.img,
					QR_Code: this.QR_Code
				}

			},

			// 打开评论窗口111
			openComment() {
				this.$refs.comment.show()
			}
		}

	}
</script>

<style lang="scss">
	.app {
		.re {
			position: relative;

			.img-a {
				height: 1000rpx;
				width: 750rpx;
			}

			.img-b {
				// z-index: 20;
				position: absolute;
				height: 310rpx;
				width: 310rpx;
				top: 630rpx;
			}

			.bttc {
				z-index: 20;
				position: absolute;
				top: 1100rpx;
				left: 0;
				right: 0;

				.bcbutton {
					width: 690rpx;
					height: 100rpx;
					background: linear-gradient(90deg, #BB73D5, #643A92);
					box-shadow: 0px 4rpx 6rpx 0px rgba(100, 58, 146, 0.4);
					border-radius: 20rpx;

					text {
						width: 128rpx;
						height: 32rpx;
						font-size: 32rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 34rpx;
					}
				}
				
				.bcbuttontt {
					width: 660rpx;
					height: 100rpx;
					background: linear-gradient(90deg, #BB73D5, #643A92);
					box-shadow: 0px 4rpx 6rpx 0px rgba(100, 58, 146, 0.4);
					border-radius: 20rpx;
					// margin-top: 50rpx;
				
					text {
						width: 128rpx;
						height: 32rpx;
						font-size: 32rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 34rpx;
					}
				}
			}

			.below_w {
				// z-index: 20;
				position: absolute;
				top: 1250rpx;
				left: 0;
				right: 0;
				width: 750rpx;
				height: 250rpx;


				.nump {
					position: relative;
					margin-left: 30rpx;
					width: 325rpx;
					height: 160rpx;


					image {
						width: 325rpx;
						height: 160rpx;
					}

					.pstyle {
						padding-top: 30rpx;
						padding-left: 30rpx;
						width: 150rpx;
						height: 28rpx;
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40rpx;
						position: absolute;
						top: 0;
					}

					.pstylen {
						padding-top: 80rpx;
						padding-left: 80rpx;
						width: 112rpx;
						height: 28rpx;
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40rpx;
						position: absolute;
						top: 0;
					}
				}

				.awardp {
					position: relative;
					margin-right: 30rpx;
					width: 325rpx;
					height: 160rpx;
					background: linear-gradient(270deg, #FFAE43 0%, #FDC305 100%);
					border-radius: 10rpx;

					image {
						width: 325rpx;
						height: 160rpx;
					}

					.jlrs {
						padding-top: 30rpx;
						padding-left: 30rpx;
						width: 250rpx;
						height: 28rpx;
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40rpx;
						position: absolute;
						top: 0;
					}

					.jlrsn {
						padding-top: 80rpx;
						padding-left: 30rpx;
						width: 112rpx;
						height: 28rpx;
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40rpx;
						position: absolute;
						top: 0;
					}

					.award {
						width: 200rpx;
						height: 28rpx;
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40rpx;

					}
				}

				.infos {
					margin-top: 30rpx;
					width: 689rpx;
					height: 30rpx;
					font-size: 26rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #666666;
				}

			}

		}




	}
</style>
